<template>
  <div class="forget-password-container">
    <h2>忘记密码</h2>
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label>手机号</label>
        <input 
          type="tel"
          v-model="phone"
          placeholder="请输入手机号"
          maxlength="11"
          @input="validatePhone"
          required
        >
        <span class="error-tip" v-if="phoneError">{{ phoneError }}</span>
      </div>
      
      <div class="form-group" v-if="showVerificationCode">
        <label>验证码</label>
        <div class="verification-code">
          <input 
            type="text"
            v-model="verificationCode"
            placeholder="请输入验证码"
            maxlength="6"
            required
          >
          <button 
            type="button"
            :disabled="countdown > 0 || !isValidPhone"
            @click="sendVerificationCode"
          >
            {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
          </button>
        </div>
      </div>

      <div class="form-group" v-if="showNewPassword">
        <label>新密码</label>
        <input 
          type="password"
          v-model="newPassword"
          placeholder="请输入8-20位新密码"
          required
        >
        <span class="error-tip" v-if="passwordError">{{ passwordError }}</span>
      </div>

      <div class="form-group" v-if="showNewPassword">
        <label>确认密码</label>
        <input 
          type="password"
          v-model="confirmPassword"
          placeholder="请再次输入新密码"
          required
        >
        <span class="error-tip" v-if="confirmPasswordError">{{ confirmPasswordError }}</span>
      </div>

      <button type="submit" class="submit-btn" :disabled="!isFormValid">重置密码</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      verificationCode: '',
      newPassword: '',
      confirmPassword: '',
      showVerificationCode: false,
      showNewPassword: false,
      countdown: 0,
      phoneError: '',
      passwordError: '',
      confirmPasswordError: ''
    }
  },
  computed: {
    isValidPhone() {
      return /^1[3-9]\d{9}$/.test(this.phone)
    },
    isFormValid() {
      if (!this.showVerificationCode) {
        return this.isValidPhone
      }
      if (!this.showNewPassword) {
        return this.isValidPhone && this.verificationCode.length === 6
      }
      return this.isValidPhone && 
             this.verificationCode.length === 6 && 
             this.newPassword && 
             !this.passwordError && 
             !this.confirmPasswordError
    }
  },
  methods: {
    validatePhone() {
      if (!this.phone) {
        this.phoneError = '请输入手机号'
      } else if (!this.isValidPhone) {
        this.phoneError = '请输入正确的手机号'
      } else {
        this.phoneError = ''
      }
    },
    validatePassword() {
      if (this.newPassword.length < 8 || this.newPassword.length > 20) {
        this.passwordError = '密码长度需在8-20位之间'
        return false
      }
      if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(this.newPassword)) {
        this.passwordError = '密码需包含大小写字母和数字'
        return false
      }
      this.passwordError = ''
      return true
    },
    validateConfirmPassword() {
      if (this.newPassword !== this.confirmPassword) {
        this.confirmPasswordError = '两次输入的密码不一致'
        return false
      }
      this.confirmPasswordError = ''
      return true
    },
    async sendVerificationCode() {
      if (!this.isValidPhone) return
      
      try {
        // 调用发送验证码的API
        // await this.$api.sendSmsCode(this.phone)
        this.startCountdown()
        this.showVerificationCode = true
      } catch (error) {
        console.error('发送验证码失败:', error)
      }
    },
    startCountdown() {
      this.countdown = 60
      const timer = setInterval(() => {
        this.countdown--
        if (this.countdown <= 0) {
          clearInterval(timer)
        }
      }, 1000)
    },
    async handleSubmit() {
      try {
        if (!this.showVerificationCode) {
          // 第一步：验证手机号
          if (this.isValidPhone) {
            this.showVerificationCode = true
          }
          return
        }
        
        if (!this.showNewPassword) {
          // 第二步：验证验证码
          if (this.verificationCode.length === 6) {
            // 验证验证码是否正确
            // await this.$api.verifySmsCode(this.phone, this.verificationCode)
            this.showNewPassword = true
          }
          return
        }

        // 第三步：提交新密码
        if (this.validatePassword() && this.validateConfirmPassword()) {
          // 调用重置密码的API
          // await this.$api.resetPassword({
          //   phone: this.phone,
          //   verificationCode: this.verificationCode,
          //   newPassword: this.newPassword
          // })
          this.$message.success('密码重置成功')
          this.$router.push('/login')
        }
      } catch (error) {
        console.error('重置密码失败:', error)
      }
    }
  },
  watch: {
    newPassword() {
      if (this.showNewPassword) {
        this.validatePassword()
        if (this.confirmPassword) {
          this.validateConfirmPassword()
        }
      }
    },
    confirmPassword() {
      if (this.showNewPassword) {
        this.validateConfirmPassword()
      }
    }
  }
}
</script>

<style scoped>
.forget-password-container {
  max-width: 400px;
  margin: 40px auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}

input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

input:focus {
  outline: none;
  border-color: #1890ff;
}

.verification-code {
  display: flex;
  gap: 10px;
}

.verification-code input {
  flex: 1;
}

.verification-code button {
  white-space: nowrap;
  padding: 0 15px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.submit-btn {
  width: 100%;
  padding: 10px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.submit-btn:hover {
  background-color: #40a9ff;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.error-tip {
  color: #ff4d4f;
  font-size: 12px;
  margin-top: 4px;
  display: block;
}
</style>
